﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@section styles{
    <style>
        .el-tabs--border-card>.el-tabs__content {
            padding: 2px;
}
    </style>
}

<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Product/Index"><i class="fa fa-dashboard"></i> 商品管理</a></li>
            </ol>
        </div>
        <div class="box-body">

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3 col-sm-2">
                    <input class="form-control" v-model="table.args.code" placeholder="商品编码/条码" debounce="500" />
                </div>
                <div class="col-xs-3 col-sm-2">
                    <input class="form-control" v-model="table.args.name" placeholder="商品名称" debounce="500" />
                </div>
                <div class="col-xs-3 col-sm-2">
                    <brand-selector v-model="table.args.brandIds" placeholder="品牌"></brand-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <category-selector v-model="table.args.categoryId" placeholder="品类"></category-selector>
                </div>
            </div>
            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData()">查 询</button>
                        <a class="btn btn-warning btn-flat" href="/Product/Create">发布商品</a>
                    </span>
                </el-col>
            </el-row>
            <el-tabs type="border-card" v-model="table.args.status" v-on:tab-click="handleClick">
                <el-tab-pane label="全部商品" name="0"></el-tab-pane>
                <el-tab-pane label="销售中" name="1"></el-tab-pane>
                <el-tab-pane label="已下架" name="2"></el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col v-bind:span="24">
                    <el-table class="form-group" ref="$table" v-bind:data="table.rows" border style="width: 100%" v-bind:height="table.height">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="Code" label="商品编码" width="100"></el-table-column>
                        <el-table-column prop="Name" label="商品名称" width="200"></el-table-column>
                        <el-table-column prop="ProductImage" label="图片" width="200">
                            <template slot-scope="scope">
                                <img  :src="scope.row.ImageUrl" width="100%" height="50"/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="CategoryNameAndCode" label="类别" width="300"></el-table-column>
                        <el-table-column prop="BrandNameAndCode" label="品牌" width="150"></el-table-column>
                        <el-table-column prop="OldPrice" label="原价" width="80"></el-table-column>
                        <el-table-column prop="SalePrice" label="售价" width="80"></el-table-column>
                        <el-table-column prop="Unit" label="单位" width="80"></el-table-column>
                        <el-table-column prop="Specification" label="规格"></el-table-column>
                        @*<el-table-column prop="SellingPoint" label="卖点描述" ></el-table-column>*@
                        <el-table-column label="操作" fixed="right" width="100">
                            <template slot-scope="scope">
                                <el-button-group>
                                    @*<el-button v-on:click="detailRow(scope.row)" size="small" type="primary">查看</el-button>*@
                                    <el-button v-on:click="edit(scope.row)" size="small" type="success">编辑</el-button>
                                    @*<el-button v-on:click="removeRow(scope.row)" v-if="scope.row.Status!=2" size="small" type="danger">删除</el-button>*@
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper"
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>

        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>
</div>

@section scripts{
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script>

        // bootstrap the demo
        var demo = new Vue({
            components: {
            },
            el: '#app',
            data: {
                table: {
                    height: 450,
                    rows: [],
                    args: { name: '', code: '', brandIds: '', categoryId: '', status: '0' },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize },
                },


            },
            methods: {

                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function () {
                    var _self = this;
                    var url = "/Product/LoadData";
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },
                edit: function (row) {
                    window.location.href = "/Product/Edit/" + row.Id;
                },
                handleClick: function (tab, event) {
                    this.table.args.status = tab.name;
                    this.loadData();
                }
            },

            created: function () {
                setListPage(this.table, 253);
                this.loadData();
            },
        })

    </script>
}


